<script lang="ts" setup>
import type { Honor01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useSwiper } from '@/hooks/useSwiper'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderHonor01.less'

defineOptions({
  name: 'RenderHonor01',
})
const props = defineProps<{
  render: Honor01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
/** 此模板显示上限4个 */
const renderedItems = computed(() => props.render.config.items!.slice(0, 10))
const { swiperCls, swiperId } = useSwiper({
  prefix,
  props,
  watchSourceForUpdate: () => props.render.config.items,
  swiperOpts: {
    autoplay: true,
    loop: true,
    // pagination: false,
    slidesPerView: designStore.config.platform === 'mobile' ? 'auto' : 5,
    spaceBetween: 10,
    centeredSlides: true,
    slideActiveClass: prefix('swiper-slide-active'),
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  },
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <div :id="swiperId" class="swiper" :class="[swiperCls]">
        <div class="swiper-wrapper">
          <div v-for="item in renderedItems" :key="item.id" class="swiper-slide" :class="[prefix('swiper-slide')]">
            <div :class="prefix('info')">
              <div :class="prefix('infoimg')">
                <img :src="item.picture" :class="prefix('picture')">
              </div>
              <div :class="prefix('info-text')">
                <span :class="prefix('text-title')"> {{ item.title }}</span>
                <span :class="prefix('text-desc')"> {{ item.description }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination-box">
          <div v-if="platform === 'pc'" class="swiper-pagination" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.swiper-pagination {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

:deep(.swiper-pagination-bullet) {
  max-width: 180px;
  flex: 1;
  height: 4px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 0 !important;
}

:deep(.swiper-pagination-bullet-active) {
  color: #fff;
  background: #007aff;
}
</style>
